<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            min-width: 1000px;
            height: 100%;
        }

        .form-bg {
            background: linear-gradient(to right, rgb(122, 182, 182) 0%, rgb(122, 182, 182), 50%, rgb(229, 207, 170) 50%, rgb(229, 207, 170) 100%);
            height: 100%;
        }

        .container {
            width: 600px;
            height: 630px;
            background-color: rgb(255, 255, 255);
            box-shadow: 15px 15px rgb(0, 0, 0, 0.4);
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .row {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
        }



        .heading {
            color: rgb(85, 85, 85);
            font-size: 40px;
            font-weight: 800;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 100px;
        }

        .form-horizontal {}

        .form-group {
            margin: 20px 0;


        }

        .form-group input {
            border: 0px;
            margin-left: 5px;
            border-bottom: solid 2px rgb(229, 229, 229);
            outline: none;


        }

        .form-group select {
            border: 0px;
            border-bottom: solid 2px rgb(229, 229, 229);
            outline: none;
            color: rgb(117, 117, 117);
        }

        span {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .create_account {
            color: rgb(214, 188, 139);
            text-decoration: none;
            font-weight: 800;
            font-size: 20px;

        }

        .create_account:hover {
            color: rgba(214, 188, 139, 0.7);

        }

        /* 表单验证 */
        .error {

            display: flex;
            justify-content: right;
            align-items: center;
            font-size: small;
            color: red;
        }
    </style>
</head>


<body>

    <div class="demo form-bg">
        <div class="container">

            <div class="row">

                <form class="form-horizontal">
                    <div class="heading">注册页面</div>
                    <div class="form-group">
                        <i class="iconfont icon-yonghu"></i><input required type="text" class="form-control"
                            placeholder="Id" id="username">
                        <span class="error" id="e_username"></span>
                    </div>
                    <div class="form-group">
                        <i class="iconfont icon-mima"></i><input required type="test" class="form-control"
                                                                 placeholder="Name" id="name" />
                        <span class="error" id="e_name"></span>
                    </div>
                    <div class="form-group">
                        <i class="iconfont icon-mima"></i><input required type="password" class="form-control"
                            placeholder="Password" id="password" />
                        <span class="error" id="e_password"></span>
                    </div>


                    <div class="form-group">
                        <i class="iconfont icon-xingbie"></i>
                        <select name="sex" id="sex">
                            <option value="">please choose your sex</option>
                            <option value="man">man</option>
                            <option value="woman">woman</option>

                        </select>
                    </div>
                    <div class="form-group">

                        <span><a href="#" class="create_account" id="regist">注册</a></span>
                    </div>
                </form>

            </div>
        </div>
    </div>





    <script>
        $(function () {

            $('#regist').on('click', function () {

                var username = $('#username').val();
                var password = $('#password').val();
                var name = $('#name').val();
                var sex = $('#sex').val();
                $.post('http://localhost/student/signUp', { username: username, sex: sex, password: password ,name:name},
                    function (res) {
                    if (res===true){
                         alert("注册成功")
                          window.location.href = '/all/student/login.html';
                    }
                   else alert("注册失败，已存在相同信息")
                    })
            })
        })

        // 表单验证
        window.onload = function () {



            // 给表单绑定上传事件
            document.getElementsByClassName('form-horizontal').onsubmit = function () {
                return checkUsername() && checkPassword();
            }

            // 离开焦点事件
            document.getElementById('username').onblur = checkUsername;
            document.getElementById('password').onblur = checkPassword;
            function checkUsername() {
                let username = document.querySelector('#username').value;

                // 正则(只能是字母或者数字)
                let reg_username = new RegExp(/^[0-9A-Za-z]{2,6}$/)

                // 判断

                // console.log(length_flag)
                let flag = reg_username.test(username)
                // console.log(flag)
                // 字母或数字判断

                let e_username = document.querySelector('#e_username')


                if (flag) {
                    // 对的
                    e_username.innerHTML = "<i class='iconfont icon-chenggong' style='color:green;'></i>"



                }
                else {

                    e_username.innerHTML = '输入长度必须在2-6位间且由字母或数字组成'

                }

                return flag;


            }

            function checkPassword() {
                let password = document.querySelector('#password').value;
                let reg_password = new RegExp(/^[0-9A-Za-z]{4,10}$/)
                ///^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
                let flag = reg_password.test(password)
                let e_password = document.querySelector('#e_password')
                if (flag) {
                    // 对的
                    e_password.innerHTML = "<i class='iconfont icon-chenggong' style='color:green;'></i>"



                }
                else {
                    e_password.innerHTML = '输入长度必须在4-10位间且由字母或数字组成'
                }

                return flag;
            }
        }


    </script>
</body>

</html>